<template>
  <div id="app">
    <div class="daily-menu">
      <div class="daily-menu-item"
        :class="{on:type==='recommend'}"
        @click="handleToRecommend">每日推荐</div>
      <div class="daily-menu-item"
        :class="{on:type==='daily'}"
        @click="showThemes=!showThemes">主题日报</div>
      <ul v-show="showThemes">
        <li v-for="item in themes">
          <a 
            :class="{on:item.id===themeId&&type==='daily'}"
            @click="handleToTheme(item.id)">
            {{item.name}}
          </a>
        </li>
      </ul>
    </div>
    <div class="daily-list">
      <template v-if="type==='recommend'">
        <div v-for="list in recommendList">
          <div class="daily-date">{{formatDay(list.date)}}</div>
          <Item v-for="item in list.stories"
                :data="item"
                :key="item.id"
                @click.native="handleClick(item.id)">
          </Item>
        </div>
        <!-- 翻页按钮 -->
        <div class="btn-box">
          <button @click="goToPrevDay">前一天</button>
          <button @click="goToNextDay">后一天</button>
        </div>
      </template>

      <template v-if="type==='daily'">
        <Item v-for="item in list"
              :data="item"
              :key="item.id"
              @click.native="handleClick(item.id)">
        </Item>
      </template>
    </div>
    <daily-article :id="articleId"></daily-article>
  </div>
</template>

<script>
import $ from "../lib/util.js";
import Item from "./components/item";
import dailyArticle from './components/daily-article';
export default {
  name: "App",
  components: {
    Item,
    dailyArticle
  },
  data() {
    return {
      themes: [],
      showThemes: false,
      type: "recommend",
      themeId: 0,
      list: [],
      recommendList: [],
      dailyTime: $.getTodayTime(),
      isLoading: false,
      turnTime:86400000,
      articleId:0
    };
  },
  methods: {
    formatDay(date) {
      let month = date.substr(4, 2);
      let day = date.substr(6, 2);
      if (month.substr(0, 1) === "0") month = month.substr(1, 1);
      if (day.substr(0, 1) === "0") day = day.substr(1, 1);
      return `${month} 月 ${day} 日`;
    },
    getThemes() {
      $.ajax.get("themes").then(res => {
        this.themes = res.others;
      });
    },
    handleToTheme(id) {
      //改变菜单分类
      this.type = "daily";
      this.themeId = id;
      this.list = [];
      $.ajax.get("theme/" + id).then(res => {
        // 过滤类型为1的文章,该类型下文章为空
        this.list = res.stories.filter(item => item.tuype !== 1);
      });
    },
    handleToRecommend() {
      this.type = "recommend";
      this.recommendList = [];
      this.dailyTime = $.getTodayTime();
      this.getRecommendList();
    },
    getRecommendList() {
      this.isLoading = true;
      const prevDay = $.prevDay(this.dailyTime + 86400000);
      $.ajax.get("news/before/" + prevDay).then(res => {
        this.recommendList.push(res);
        this.isLoading = false;
      });
    },
    goToPrevDay() {
      this.isLoading = true;
      this.recommendList = [];
      this.turnTime-=86400000;
      const prevDay = $.prevDay(this.dailyTime+this.turnTime);
      $.ajax.get("news/before/" + prevDay).then(res => {
        this.recommendList.push(res);
        this.isLoading = false;
      });
    },
    goToNextDay() {
      this.isLoading = true;
      this.recommendList = [];
      this.turnTime+=86400000;
      const prevDay = $.prevDay(this.dailyTime + this.turnTime);
      $.ajax.get("news/before/" + prevDay).then(res => {
        this.recommendList.push(res);
        this.isLoading = false;
      });
    },
    handleClick(id){
      this.articleId=id;
    }
  },
  mounted() {
    this.getThemes();
    this.getRecommendList();
  }
};
</script>
